<template lang="pug">
  i(v-html="parsedHtml")
</template>

<script>
import _ from 'lodash'
function parseDom(arg) {
  let objE = document.createElement('div')
  objE.innerHTML = arg
  return objE.childNodes
}

function parseStr(arg) {
  let objE = document.createElement('div')
  objE.appendChild(arg)
  return objE.innerHTML
}

export default {
  name: 'svgHtmlIcon',
  props: ['value'],
  data() {
    return {
      id: undefined
    }
  },
  computed: {
    parsedHtml() {
      if (!this.value) {
        return ''
      }
      let dom
      _.each(parseDom(this.value), one => {
        if (one.tagName.toUpperCase() === 'SVG') {
          dom = one
          return false
        }
      })
      dom.removeAttribute('width')
      dom.removeAttribute('height')
      dom.setAttribute('class', 'svg-symbol-icon')
      let children = dom.querySelectorAll('*')
      _.each(children, one => {
        one.removeAttribute('fill')
      })
      return parseStr(dom)
    }
  }
}
</script>

<style lang="scss">
  .svg-symbol-icon {
    /*width: 1em;*/
    height: 1em;
    vertical-align: -0.1em;
    fill: currentColor;
    overflow: hidden;
  }

</style>
